<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <!-- V -->

    <div id="app">
        <!-- 声明式渲染：告知vue，msg的值应该显示p标签里 -->
        <p>{{msg}}</p>
        <p>{{str}}</p>
        <input type="button" value="修改msg" @click="changeMsg">
    </div>
    
    <div id="app2">
            
        <p>{{msg}}</p>
    
    </div>

</body>
</html>
<!-- vm -->
<script src="./js/vue.js"></script>

<script>

    // M:
    let vm = new Vue({
        el:"#app", //el：element,表示当前vue对象对应着那段HTML代码
        data:{
            msg:"hi",
            str:'hello'
        },
        methods:{
            changeMsg(){
                this.msg = "how old are you"
            }
        }
    });

    
    let vm2 = new Vue({
        el:"#app2", //el：element,表示当前vue对象对应着那段HTML代码
        data:{
            msg:"how are you"
        }
    });


</script>